<template>
    <div class="static-data-upload">
        <el-card class="!border-none" shadow="never">
            <el-form :model="formData" label-width="80px">
                <company-select 
                    @select-company="handleSelectCompany"
                    @select-type="handleSelectType"
                    custom-class="w-[300px]"
                    show-type-select
                />
                <el-form-item label="IPC Type">
                    <el-select 
                        v-model="formData.ipc_type" 
                        placeholder="请选择"
                        class="w-[300px]"
                        filterable
                        clearable
                    >
                        <!-- 公司相关 -->
                        <el-option label="baseInfoCompany" value="baseInfoCompany" />
                        <el-option label="baseInfoCompanyStat" value="baseInfoCompanyStat" />
                        <el-option label="baseInfoCompanyPay" value="baseInfoCompanyPay" />
                        <el-option label="baseInfoCompanyService" value="baseInfoCompanyService" />
                        <el-option label="baseInfoCompanyPermit" value="baseInfoCompanyPermit" />
                        <el-option label="baseInfoCompanyFare" value="baseInfoCompanyFare" />
                        
                        <!-- 车辆相关 -->
                        <el-option label="baseInfoVehicle" value="baseInfoVehicle" />
                        <el-option label="baseInfoVehicleInsurance" value="baseInfoVehicleInsurance" />
                        <el-option label="baseInfoVehicleTotalMile" value="baseInfoVehicleTotalMile" />
                        <el-option label="positionVehicle" value="positionVehicle" />
                        
                        <!-- 司机相关 -->
                        <el-option label="baseInfoDriver" value="baseInfoDriver" />
                        <el-option label="baseInfoDriverEducate" value="baseInfoDriverEducate" />
                        <el-option label="baseInfoDriverApp" value="baseInfoDriverApp" />
                        <el-option label="baseInfoDriverStat" value="baseInfoDriverStat" />
                        <el-option label="ratedDriver" value="ratedDriver" />
                        <el-option label="ratedDriverPunish" value="ratedDriverPunish" />
                        <el-option label="positionDriver" value="positionDriver" />
                        
                        <!-- 乘客相关 -->
                        <el-option label="baseInfoPassenger" value="baseInfoPassenger" />
                        <el-option label="ratedPassenger" value="ratedPassenger" />
                        <el-option label="ratedPassengerComplaint" value="ratedPassengerComplaint" />
                        
                        <!-- 订单相关 -->
                        <el-option label="orderCreate" value="orderCreate" />
                        <el-option label="orderMatch" value="orderMatch" />
                        <el-option label="orderCancel" value="orderCancel" />
                        
                        <!-- 运营相关 -->
                        <el-option label="operateStatistics" value="operateStatistics" />
                        <el-option label="operateStaticStatistics" value="operateStaticStatistics" />
                        <el-option label="operateDepart" value="operateDepart" />
                        <el-option label="operateArrive" value="operateArrive" />
                        <el-option label="operatePay" value="operatePay" />
                        <el-option label="operateLogin" value="operateLogin" />
                    </el-select>
                </el-form-item>
                <el-form-item label="数据">
                    <div class="flex flex-col">
                        <el-input
                            v-model="formData.code"
                            type="textarea"
                            :rows="15"
                            style="width: 600px"
                            placeholder="请输入JSON数据"
                            class="w-full font-mono mb-2"
                        />
                        <div class="flex items-center">
                            <el-button type="primary" @click="formatJson">格式化</el-button>
                            <el-button type="primary" class="ml-2" @click="compressJson">压缩</el-button>
                            <el-button type="primary" class="ml-2" @click="clearJson">清空</el-button>
                            <el-button type="primary" @click="handleSubmit">上传数据</el-button>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="staticDataUpload">
import { reactive } from 'vue'
import CompanySelect from '@/components/company-select/index.vue'
import feedback from '@/utils/feedback'
import { upload } from '@/api/supervise/static-data'

const formData = reactive({
    company_id: '',
    type:'',
    ipc_type: '',
    code: ''
})

const handleSelectCompany = (companyId: any) => {
    formData.company_id = companyId
}

const handleSelectType = (type: any) => {
    formData.type = type
}

const formatJson = () => {
    try {
        if (!formData.code) {
            feedback.msgError('请输入JSON数据')
            return
        }
        // 格式化JSON
        const parsedJson = JSON.parse(formData.code)
        formData.code = JSON.stringify(parsedJson, null, 2)
        feedback.msgSuccess('格式化成功')
    } catch (error) {
        feedback.msgError('JSON格式不正确')
    }
}

const compressJson = () => {
    try {
        if (!formData.code) {
            feedback.msgError('请输入JSON数据')
            return
        }
        // 压缩JSON（移除所有空格）
        const parsedJson = JSON.parse(formData.code)
        formData.code = JSON.stringify(parsedJson)
        feedback.msgSuccess('压缩成功')
    } catch (error) {
        feedback.msgError('JSON格式不正确')
    }
}

const clearJson = () => {
    formData.code = ''
}

const handleSubmit = async () => {
    try {
        if (!formData.company_id) {
            feedback.msgError('请选择公司')
            return
        }
        if (!formData.type) {
            feedback.msgError('请选择部门类型')
            return
        }
        if (!formData.ipc_type) {
            feedback.msgError('请选择IPC Type')
            return
        }
        if (!formData.code) {
            feedback.msgError('请输入数据')
            return
        }

        // 验证JSON格式
        try {
            JSON.parse(formData.code)
        } catch (error) {
            feedback.msgError('JSON格式不正确')
            return
        }

        await feedback.confirm('确认上传数据？')
        await upload({
            company_id: formData.company_id,
            ipc_type: formData.ipc_type,
            type: formData.type,
            param_str: JSON.parse(formData.code)
        })
        feedback.msgSuccess('上传成功')
        
        // 清空表单
        formData.code = ''
        formData.ipc_type = ''
        formData.type = ''
    } catch (error) {
        console.error('上传失败:', error)
    }
}
</script>

<style lang="scss" scoped>
.static-data-upload {
    :deep(.el-textarea__inner) {
        font-family: Consolas, Monaco, 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre;
    }
}
</style>